/**
 * Created by levy on 16/7/11.
 */
import {shopping} from "../const/shopping";
import {TimeUtil} from "../components/shopping/TimeUtil";
import Fixed from "../components/Fixed";

const lf = liefeng,
    R = React,
    RC = React.createClass,
    log = lf.utils.log,
    ajax = lf.utils.ajax;

const orderId = lf.utils.getUrlParam('orderId');

//支付常量, 第二个页面要用到时再抽出来
const PAY_SUCCESS = 'success',
    PAY_FAIL = 'fail',
    PAY_CANCEL = 'cancel',
    PAY_INVALID = 'invalid', //支付插件未安装（一般是微信客户端未安装的情况）
    NETWORK_ERROR = 'error';

/**
 * props
 *  user
 *  data
 */
const Root = RC({
    getInitialState() {
        return {
            icon: 'iconfont icon-shijian',
            title: '选择支付方式',
            errMsg: '',
            time: TimeUtil.convertTime(this.props.data.remaingTime),
        }
    },
    componentDidMount() {
        let time = this.state.time;

        const countDownEndFn = () => {
            this.setState({
                title: '订单已取消',
                errMsg: '订单超时已失效,如要购买,需重新添加。',
                icon: 'mui-icon mui-icon-info',
            });
        };
        const countDownIngFn = time => this.setState({ time: time });

        TimeUtil.countDown(time, countDownIngFn, countDownEndFn);

        //选择支付方式
        let $checkbox = $('.checkbox'),
            channel;

        $checkbox.on('touchend', function () {
            let $me = $(this);

            $me.addClass('active');
            $checkbox.not($me).removeClass('active');

            channel = $me.data('channel');
        });

        $checkbox.eq(0).trigger('touchend');

        //确认支付
        R.findDOMNode(this.refs.payOrder).addEventListener('touchend', () => {

            lf.appJs.pay({
                orderId: this.props.data.orderId,
                channel: channel,
            }, function (data) {
                if(data.indexOf(PAY_SUCCESS) > -1) {
                    lf.appJs.toast('支付成功');
                    setTimeout(function () {
                        lf.appJs.doLocation('shopping-order-list.html?flag=shipping', '待收货');
                    },1000)
                }else if(data.indexOf(PAY_FAIL) > -1){
                    alert('支付插件未安装')
                }
                else if(data.indexOf(PAY_FAIL) > -1)
                    alert('支付失败');
                else if(data.indexOf(NETWORK_ERROR) > -1) {
                    alert('网络不给力');
                }
            })
        });
    },
    render() {
        let st = this.state,
            errMsg = st.errMsg,
            min = st.time.min,
            sec = st.time.sec;

        return <div className="order-pay">
            <div className="header flex">
                <span className={"icon " + st.icon}/>
                <div className="text">
                    <p className="title">{st.title}</p>
                    {
                        errMsg ? errMsg :
                            <p>订单为你保留
                                <span className="time red">
                                    {min + ':' + (sec < 10 ? '0' + sec : sec)}
                                </span>
                                ,超时将自动取消
                            </p>
                    }
                </div>
            </div>
            <div className="split-line"></div>
            <div className="row flex space-between">
                <span>订单金额</span>
                <span className="red">{'￥' + this.props.data.orderAmount}</span>
            </div>
            <div className="split-line"></div>
            <div className="pay">
                <div className="row border-bottom">支付方式</div>
                <div className="pay-way">
                    <div className="row border-bottom">
                        <span className="checkbox" data-channel="alipay"/>
                        <span className="iconfont icon-zhifubao">支付宝</span>
                        <span className="small">支持大额订单支付</span>
                    </div>
                    <div className="row border-bottom">
                        <span className="checkbox" data-channel="wx"/>
                        <span className="iconfont icon-weixinzhifu" >微信</span>
                        <span className="small">单笔订单金额最高支持8000元</span>
                    </div>
                </div>
            </div>
            {
                errMsg ? '' :
                    <Fixed data={
                        <div className="mui-btn shopping-red-bg" ref="payOrder">确认支付</div>
                }/>
            }
        </div>
    }
});


lf.appJs.getUser(function (user) {
    ajax({
        url: shopping.api.prefix + shopping.api.order.detail,
        data: {
            orderId: orderId,
        }
    }, null, (data) => {
        R.render(<Root user={user} data={data}/>, document.getElementById('root'));
    });
});
